<template>
  <div class="products">
    <a-page-header
      title="商品管理"
      sub-title="商品信息维护"
    >
      <template #extra>
        <a-button type="primary" @click="showAddModal">
          <PlusOutlined />
          新增商品
        </a-button>
      </template>
    </a-page-header>

    <!-- 搜索区域 -->
    <a-card style="margin-bottom: 16px;">
      <a-form layout="inline" :model="searchForm">
        <a-form-item label="商品名称">
          <a-input v-model:value="searchForm.name" placeholder="请输入商品名称" />
        </a-form-item>
        <a-form-item label="商品分类">
          <a-select v-model:value="searchForm.category" placeholder="请选择分类" style="width: 200px;">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="生鲜">生鲜</a-select-option>
            <a-select-option value="日用品">日用品</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model:value="searchForm.status" placeholder="请选择状态" style="width: 120px;">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">启用</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">
            <SearchOutlined />
            搜索
          </a-button>
          <a-button style="margin-left: 8px;" @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 商品列表 -->
    <a-card>
      <a-table
        :columns="columns"
        :data-source="products"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'image'">
            <a-image :width="50" :src="record.image" fallback="/placeholder.png" />
          </template>
          <template v-else-if="column.key === 'status'">
            <a-tag :color="record.status === 1 ? 'green' : 'red'">
              {{ record.status === 1 ? '启用' : '禁用' }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
              <a-button type="link" size="small" @click="handleView(record)">查看</a-button>
              <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record.id)">
                <a-button type="link" size="small" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑弹窗 -->
    <a-modal
      v-model:open="modalVisible"
      :title="modalTitle"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      width="800px"
    >
      <a-form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="商品名称" required>
          <a-input v-model:value="formData.name" placeholder="请输入商品名称" />
        </a-form-item>
        <a-form-item label="商品编码" required>
          <a-input v-model:value="formData.code" placeholder="请输入商品编码" />
        </a-form-item>
        <a-form-item label="商品分类" required>
          <a-select v-model:value="formData.category" placeholder="请选择分类">
            <a-select-option value="生鲜">生鲜</a-select-option>
            <a-select-option value="日用品">日用品</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="销售价格" required>
          <a-input-number v-model:value="formData.price" :min="0" :precision="2" style="width: 100%;" />
        </a-form-item>
        <a-form-item label="成本价格">
          <a-input-number v-model:value="formData.costPrice" :min="0" :precision="2" style="width: 100%;" />
        </a-form-item>
        <a-form-item label="库存数量">
          <a-input-number v-model:value="formData.stock" :min="0" style="width: 100%;" />
        </a-form-item>
        <a-form-item label="状态">
          <a-radio-group v-model:value="formData.status">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="商品描述">
          <a-textarea v-model:value="formData.description" :rows="4" placeholder="请输入商品描述" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  PlusOutlined,
  SearchOutlined,
} from '@ant-design/icons-vue'

// 搜索表单
const searchForm = reactive({
  name: '',
  category: '',
  status: ''
})

// 表格列定义
const columns = [
  { title: '商品图片', dataIndex: 'image', key: 'image', width: 80 },
  { title: '商品名称', dataIndex: 'name', key: 'name' },
  { title: '商品编码', dataIndex: 'code', key: 'code' },
  { title: '分类', dataIndex: 'category', key: 'category' },
  { title: '销售价格', dataIndex: 'price', key: 'price' },
  { title: '库存', dataIndex: 'stock', key: 'stock' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'action', width: 200 },
]

// 商品数据
const products = ref([
  {
    id: 1,
    name: '苹果 红富士',
    code: 'APPLE001',
    category: '生鲜',
    price: 12.8,
    costPrice: 8.5,
    stock: 150,
    status: 1,
    image: '/api/placeholder/50/50',
    description: '新鲜红富士苹果，口感脆甜'
  },
  {
    id: 2,
    name: '香蕉',
    code: 'BANANA001',
    category: '生鲜',
    price: 6.8,
    costPrice: 4.2,
    stock: 200,
    status: 1,
    image: '/api/placeholder/50/50',
    description: '进口香蕉，营养丰富'
  }
])

const loading = ref(false)
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
  showSizeChanger: true,
  showQuickJumper: true,
})

// 弹窗相关
const modalVisible = ref(false)
const modalTitle = ref('新增商品')
const formData = reactive({
  id: null,
  name: '',
  code: '',
  category: '',
  price: 0,
  costPrice: 0,
  stock: 0,
  status: 1,
  description: ''
})

// 搜索
const handleSearch = () => {
  console.log('搜索条件:', searchForm)
  // 实际项目中这里会调用API
}

const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    category: '',
    status: ''
  })
}

// 表格操作
const handleTableChange = (pag: any) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
}

// 弹窗操作
const showAddModal = () => {
  modalTitle.value = '新增商品'
  resetFormData()
  modalVisible.value = true
}

const handleEdit = (record: any) => {
  modalTitle.value = '编辑商品'
  Object.assign(formData, record)
  modalVisible.value = true
}

const handleView = (record: any) => {
  message.info(`查看商品: ${record.name}`)
}

const handleDelete = (id: number) => {
  message.success('删除成功')
}

const handleModalOk = () => {
  // 表单验证和提交逻辑
  message.success(modalTitle.value === '新增商品' ? '新增成功' : '更新成功')
  modalVisible.value = false
}

const handleModalCancel = () => {
  modalVisible.value = false
}

const resetFormData = () => {
  Object.assign(formData, {
    id: null,
    name: '',
    code: '',
    category: '',
    price: 0,
    costPrice: 0,
    stock: 0,
    status: 1,
    description: ''
  })
}

onMounted(() => {
  // 初始化数据加载
})
</script>

<style scoped>
.products {
  padding: 24px;
}
</style>